<template>
  <div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1"
        ><img src="@/assets/001.png" slot="icon" />科技</mt-tab-item
      >
      <mt-tab-item id="2"
        ><img src="@/assets/004.png" slot="icon" />数码</mt-tab-item
      >
      <mt-tab-item id="3"
        ><img src="@/assets/007.png" slot="icon" />军事</mt-tab-item
      >
      <mt-tab-item id="4"
        ><img src="@/assets/025.png" slot="icon" />音乐</mt-tab-item
      >
    </mt-navbar>

    <!-- 底部选项卡 -->
    <mt-tabbar v-model="tabSelected">
      <mt-tab-item id="index">
        <img
          :src="require(`@/assets/index_${tabSelected == 'index' ? 1 : 0}.png`)"
          alt=""
          slot="icon"
        />首页
      </mt-tab-item>
      <mt-tab-item id="me">
        <img
          v-if="tabSelected == 'me'"
          src="@/assets/me_1.png"
          alt=""
          slot="icon"
        />
        <img v-else src="@/assets/me_0.png" alt="" slot="icon" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "1", //绑定顶部导航选中项
      tabSelected: "index", //绑定底部选项卡选中项
    };
  },
};
</script>

<style lang="scss" scoped>
</style>